.bin-message {
  position: fixed;
  left: 50%;
  top: 20px;
  pointer-events: all;
  padding: 10px 16px;
  border-radius: var(--bin-border-base-radius);
  box-shadow: 0 1px 6px 1px rgba(0, 0, 0, .15);
  background: #fff;
  box-sizing: border-box;
  transform: translateX(-50%);
  transition: opacity 0.3s, transform .4s, top 0.4s;
  overflow: hidden;
  display: flex;
  align-items: center;
  &.is-closable {
    .bin-message__content {
      padding-right: 6px;
    }
  }
  .b-iconfont.b-icon-close {
    cursor: pointer;
    color: var(--bin-color-text-secondary);
    font-size: var(--bin-base-font-size);
    vertical-align: middle;
    line-height: 1

    &:focus {
      outline-width: 0;
    }
    &:hover {
      color: var(--bin-color-text-primary);
    }
  }
}

.bin-message__icon {
  margin-right: 10px;
  font-size: var(--bin-header-font-size);
  &.is-info {
    color: var(--bin-color-primary);
  }
  &.is-success {
    color: var(--bin-color-success);
  }
  &.is-warning {
    color: var(--bin-color-warning);
  }
  &.is-error {
    color: var(--bin-color-danger);
  }
}

.bin-message-fade-enter-from,
.bin-message-fade-leave-to {
  opacity: 0;
  transform: translate(-50%, -100%);
}
